<script>
    // @ts-nocheck

    export let data;
    import { onMount } from "svelte";
    

    import ItemPerk from "@/components/ui/itemPerk.svelte";
    import Cards from "@/components/ui/cards.svelte";

    const initCanvas = () => {
        const centerX = 50;
        const centerY = 50;
        const radius = 20;

        // 转换角度为弧度
        const toRadians = (angle) => angle * (Math.PI / 180);

        // 设置扇形的起止角度（以度数表示）
        const startAngleDeg = 20; // 起始角度
        const endAngleDeg = 100; // 结束角度

        // 计算半圆路径
        const halfCirclePath = `
            M ${centerX - radius}, ${centerY}
            A ${radius},${radius} 0 0,1 ${centerX + radius},${centerY}
            L ${centerX - radius}, ${centerY}
            Z
        `;

        // 计算扇形路径
        const startAngleRad = toRadians(startAngleDeg);
        const endAngleRad = toRadians(endAngleDeg);

        const startX = centerX + radius * Math.cos(startAngleRad);
        const startY = centerY - radius * Math.sin(startAngleRad);
        const endX = centerX + radius * Math.cos(endAngleRad);
        const endY = centerY - radius * Math.sin(endAngleRad);

        const largeArcFlag = endAngleRad - startAngleRad <= Math.PI ? 0 : 1;

        const sectorPath = `
            M ${centerX},${centerY}
            L ${startX},${startY}
            A ${radius},${radius} 0 ${largeArcFlag},0 ${endX},${endY}
            Z
        `;

        document.getElementById("halfCircle").setAttribute("d", halfCirclePath);
        document.getElementById("sector").setAttribute("d", sectorPath);
    };
    onMount(() => {
        if(data.Response.stats.type_sector.length){
            initCanvas();
        }
    });
</script>

<svelte:head>
    <title>光影思维-命运2-{data.Response.base.name}</title>
    <meta name="keyword" content={`${data.Response.base.name},${data.Response.base.TypeAndTier}`} />
    <meta name="description" content={`发现最佳武器、属性和技能。为您的守护者选择最适合的装备，提升游戏体验。${data.Response.base.name},${data.Response.base.TypeAndTier},${data.Response.base.flavorText}`} />
</svelte:head>

<div class="container p-6">
    <div>
        <Cards>
            <div class="flex mb-4">
                <div class=" relative mr-4">
                    <img class="icon w-24" src={data.Response.base.icon} />
                    <img class="absolute top-0 left-0 w-24" src={data.Response.base.iconWatermark} />

                    {#if data.Response.base.can_craft}
                        <img class="absolute top-0 left-0 w-24" src="/images/forge.png" />
                    {/if}
                </div>
                <div class="flex-1">
                    <!-- <div><span>{data.Response.base.weapon_hash}</span></div> -->
                    <h1 class=" text-xl">{data.Response.base.name}</h1>
                    <div class="flex gap-1 mt-2">
                        <img class="h-5" class:filter={data.Response.base.ammoType == 1} src={`/images/AmmoType/${data.Response.base.ammoType}.png`} />
                        <img class="h-5" class:filter={data.Response.base.damageTypes == 1} src={`/images/DamageType/${data.Response.base.damageTypes}.png`} />
                        <span>{data.Response.base.TypeAndTier} </span>
                    </div>
                    {#if data.Response.base.flavorText}
                        <div class="mt-3">{data.Response.base.flavorText}</div>
                    {/if}
                </div>
                <div>
                    <img class="hidden h-24 md:block" src="https://www.bungie.net/common/destiny2_content/screenshots/2198166292.jpg" alt="" />
                </div>
            </div>

            <div class="text-2xl border-b-2 h-12">固有特性</div>
            <div class="flex py-5">
                <!-- svelte-ignore a11y-missing-attribute -->
                <img class="h-16 mr-4" src={data.Response.perks.frame[0].icon} />
                <div class="flex-1">
                    <h3 class="text-2xl">{data.Response.perks.frame[0].name}</h3>
                    <div>{data.Response.perks.frame[0].desc}</div>
                </div>
            </div>

            <div class="flex-none lg:flex">
                <div class="w-full mr-5 w-96 lg:w-96">
                    <div class="text-2xl border-b-2 h-12">武器属性</div>
                    {#each data.Response.stats.type_bar as item, index}
                        <div class="my-4 flex">
                            <div class="label w-32">{item.name}</div>
                            <div class="bg-color5 flex-1 relative">
                                <span class=" absolute top-0 left-0 bottom-0 bg-white" style={`width:${item.value}%`}></span>
                            </div>
                            <div class="w-6 text-right">{item.value}</div>
                        </div>
                    {/each}

                    {#each data.Response.stats.type_num as item, index}
                        <div class="my-4 flex">
                            <div class="label w-32">{item.name}</div>
                            <div class="flex-1 relative">
                                {item.value}
                            </div>
                        </div>
                    {/each}
                    {#each data.Response.stats.type_sector as item, index}
                        <div class="my-4 flex">
                            <div class="label w-32">{item.name}</div>
                            
                            <div class=" flex-1 relative">
                                <svg class=" absolute top-[-24px] left-[-22px]" width="80" height="80" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
                                    <!-- 绘制灰色半圆 -->
                                    <path id="halfCircle" fill="gray" />
                                    <!-- 绘制白色扇形 -->
                                    <path id="sector" fill="white" />
                                </svg>
                                <span class=" pl-12">{item.value}</span>
                            </div>
                            
                        </div>
                    {/each}
                </div>

                <div class="flex-1">
                    <div class="text-2xl border-b-2 h-12">武器特性</div>

                    <div class="flex py-4 md:grid grid-cols-5">
                        <div class="flex-1 mx-4 sm:mx-1 md:flex-none">
                            {#each data.Response.perks.perk1 as item, index}
                                <div class="my-4"><ItemPerk data={item}></ItemPerk></div>
                            {/each}
                        </div>

                        {#if data.Response.perks.perk2}
                            <div class="flex-1 mx-4 sm:mx-1 md:flex-none">
                                {#each data.Response.perks.perk2 as item, index}
                                    <div class="my-4"><ItemPerk data={item}></ItemPerk></div>
                                {/each}
                            </div>
                        {/if}

                        {#if data.Response.perks.perk3}
                            <div class="flex-1 mx-4 sm:mx-1 md:flex-none">
                                {#each data.Response.perks.perk3 as item, index}
                                    <div class="my-4"><ItemPerk data={item}></ItemPerk></div>
                                {/each}
                            </div>
                        {/if}

                        {#if data.Response.perks.perk4}
                            <div class="flex-1 mx-4 sm:mx-1 md:flex-none">
                                {#each data.Response.perks.perk4 as item, index}
                                    <div class="my-4"><ItemPerk data={item}></ItemPerk></div>
                                {/each}
                            </div>
                        {/if}

                        {#if data.Response.perks.perk5}
                            <div class="flex-1 mx-4 sm:mx-1 md:flex-none">
                                {#each data.Response.perks.perk5 as item, index}
                                    <div class="my-4"><ItemPerk data={item}></ItemPerk></div>
                                {/each}
                            </div>
                        {/if}
                    </div>
                </div>
            </div>
        </Cards>
    </div>

    <!-- <div>属性</div>
    <div>
        {#each data.Response.stats.type_bar as item,index}
            <div class="statsitems">
                <div class="label">{item.name}</div>
                <div class="value"><span style={`width:${item.value}%`}>{item.value}</span></div>
            </div>
        {/each}
    </div> -->
    <!-- <button id="b1">Default popover</button> -->
</div>

<style lang="less">

</style>
